<style>
*{margin: 0;padding: 0;}
.box{
    width: 600px;
    height: 300px;
    border: 1px solid #000;
    position: relative;
    margin: 100px;
}
.big{
    width: 400px;
    height: 400px;
    border: 1px solid #000;
    position: absolute;
    top:0;
    left : 600px;
    display: none;
    background: url(./01.jpg);
    background-position: 0px 0px;
}
.mask{
    width: 100px;
    height: 100px;
    background: paleturquoise;
    position: absolute;
    left:0;
    top: 0;
    opacity: 0.3;
    display: none;
    cursor: move;
}
.small{
    position: relative;
}

</style>                                                                                        

<div class="box" >
    <div class="small">
        <img src="./001.jpg" alt="">
        <div class="mask"></div>
    </div>
    <div class="big"></div>
</div>

<script src="./demo.js"></script>
<script>
    let obj = new Magnifier('.box')
</script>
